Spacing and Distribution are essential layout techniques in Figma used to create clean, balanced, consistent, and professional designs. Spacing controls the amount of empty space between objects or around objects, while Distribution helps create equal spacing between multiple selected layers.
These concepts are especially important when designing websites, mobile applications, dashboards, cards, navigation bars, forms, product grids, and design systems.
Learn more with JustAcademy Figma Training and practice your skills with Register for Figma Course Demo.
Spacing refers to the amount of empty space between two or more objects or between the boundary of a container and its contents. Proper spacing makes a design easier to read, understand, navigate, and interact with.
Object A 24px Object B 24px Object CConsistent spacing creates visual rhythm and makes different elements appear related.
Distribution is a Figma layout operation used to create equal space between multiple selected layers. When horizontal distribution is applied, Figma adjusts the horizontal spacing between objects. When vertical distribution is applied, Figma adjusts the vertical spacing.
Figma keeps the outermost objects in their existing positions while distributing the objects between them.
Manually calculating the distance between several objects is slow and error-prone. Distribution allows designers to select multiple objects and quickly create equal spacing between them.
Before:
[Card] [Card] [Card] [Card]
After:
[Card] [Card] [Card] [Card]
| Feature | Spacing | Distribution |
|---|---|---|
| Purpose | Controls distance between elements | Makes distance equal between selected elements |
| Scope | Can involve two or more objects | Normally used with multiple selected objects |
| Example | Set card padding to 24px | Make four cards equally spaced |
| Common Tools | Auto Layout, Smart Selection, manual values | Distribute horizontal/vertical spacing |
Parent Frame
│
├── Padding
│ ├── Top
│ ├── Right
│ ├── Bottom
│ └── Left
│
└── Child Objects
├── Gap
├── Gap
└── Gap
A good design normally uses both padding and gaps. Padding controls space around the content, while gaps control space between content items.
Horizontal spacing is the distance between objects along the X-axis.
[Button] 16px [Button] 16px [Button]Horizontal spacing is commonly used in navigation bars, button groups, toolbars, card grids, filters, and desktop layouts.
Vertical spacing is the distance between objects along the Y-axis.
[Heading]
↓ 16px
[Description]
↓ 24px
[Button]
Vertical spacing is especially important for forms, articles, dashboards, mobile screens, and content-heavy interfaces.
| Type | Meaning | Example |
|---|---|---|
| Internal spacing | Space inside a component | Text inside a button |
| External spacing | Space between separate components | Two cards separated by 24px |
Padding is the space between the boundary of a parent container and its child objects. Gap is the space between child objects.
┌──────────────────────────────┐
│ ← Padding → │
│ [Object] ← Gap → [Object] │
│ │
└──────────────────────────────┘
Figma provides several ways to control spacing, including numeric position values, distribution commands, Smart Selection, Tidy Up, Layout Guides, and Auto Layout.
The best method depends on whether the design is static or needs to respond to changing content.
Select the objects that you want to arrange. You can select multiple layers using Shift-click, drag selection, or by selecting child layers inside a frame.
Layer 1
Layer 2
Layer 3
Layer 4
↓
Select all four layers
↓
Apply spacing or distribution
Manual spacing means moving objects yourself until the desired distance is achieved. This can be useful during early exploration, but it is not recommended for large layouts because small inconsistencies can easily appear.
Numeric spacing provides precise control over layout values. For example, a designer may decide that all cards should have a 24px gap.
Card 1 → 24px → Card 2 → 24px → Card 3Using consistent numeric values is much more reliable than visually estimating distances.
Figma allows designers to control the X and Y position and the width and height of layers. These values can help identify spacing differences between objects.
Object A: X = 100
Object B: X = 224
Width of Object A = 100
Spacing = 224 - (100 + 100)
Spacing = 24px
Distribute horizontal spacing creates equal horizontal gaps between selected objects. The leftmost and rightmost objects remain in position while the objects between them are repositioned.
Before:
[A] [B] [C] [D]
After:
[A] [B] [C] [D]
Distribute vertical spacing creates equal vertical gaps between selected objects. The topmost and bottommost objects remain in their positions while intermediate objects are distributed.
Before:
[A]
[B]
[C]
[D]
After:
[A]
[B]
[C]
[D]
Suppose four objects are placed between a fixed left and right boundary. Figma calculates the available space and distributes the intermediate objects evenly.
Outer Left Outer Right
A D
| |
|------ Equal Space ------|-----------|
B C
This is useful for navigation items, cards, icons, and repeated components.
When using distribution, Figma retains the position of the outermost objects. For horizontal distribution, the outer-left and outer-right objects remain fixed. For vertical distribution, the top and bottom objects remain fixed.
Before:
[A] 10px [B] 30px [C] 20px [D]
After Distribution:
[A] 20px [B] 20px [C] 20px [D]
The exact final value depends on the available space between the outer objects and the dimensions of the selected layers.
Before:
[Card] 12px [Card] 38px [Card] 18px [Card]
Problem:
Uneven rhythm
Solution:
Select cards
→ Distribute horizontal spacing
→ Equal spacing
| Alignment | Distribution |
|---|---|
| Controls where objects line up | Controls space between objects |
| Left, center, right, top, middle, bottom | Horizontal or vertical spacing |
| Creates a common edge or center | Creates equal gaps |
Alignment:
[A]
[B]
[C]
↓
Same left edge
Distribution:
[A] [B] [C]
↓
Same spacing
Tidy Up is used to quickly arrange selected layers into organized rows, columns, or two-dimensional layouts. It can also create the conditions needed for Smart Selection.
When objects are arranged in one row or one column, Tidy Up adjusts spacing along the relevant axis. It is similar to distribution but includes additional arrangement logic.
[A] [B] [C] [D]
↓ Tidy Up
[A] [B] [C] [D]
For grid-like selections, Tidy Up can organize objects into rows and columns and adjust both horizontal and vertical spacing.
[A] [B] [C]
[D] [E] [F]
[G] [H] [I]
| Distribution | Tidy Up |
|---|---|
| Creates uniform spacing | Arranges and spaces layers |
| Works along one axis at a time | Can handle one-dimensional and two-dimensional arrangements |
| Retains outer bounds | Can reorganize layers into a grid |
| Useful for equal gaps | Useful for cleaning messy layouts |
Smart Selection provides interactive controls for adjusting spacing and arranging multiple selected layers. It is especially useful when objects already have a consistent arrangement.
Smart Selection can be used to change spacing, rearrange layers, duplicate items, resize selected items, and delete items while allowing the remaining layers to reflow.
When Smart Selection is available, Figma displays handles that can be dragged to change the space between objects.
[A] ↔ [B] ↔ [C]
Smart Handles
This allows designers to adjust spacing directly on the canvas instead of manually moving every object.
Smart Selection can also help rearrange objects. Designers can mark an object and move it to another position while other objects respond to the new arrangement.
Before:
[A] [B] [C] [D]
Move C
After:
[A] [C] [B] [D]
Snapping helps designers position objects relative to other objects. Smart guides can indicate distances and alignment relationships while objects are moved.
Snapping is useful for quickly identifying whether two objects have the same edge, center, or spacing.
Pixel snapping can help keep objects aligned to whole-pixel positions. However, when distributing objects, small rounding differences may sometimes occur when pixel snapping is enabled.
Layout Guides are visual aids that help designers create structured layouts. They can provide consistent columns, rows, or grid references for placing and spacing objects.
┌──────────────────────────────────────┐
│ | | | | | | | │
│ | C1 | C2 | C3 | C4 | C5 | C6 | │
│ | | | | | | | │
└──────────────────────────────────────┘
A uniform grid divides a frame into equally sized cells. It is useful for interface layouts, icon design, dashboards, cards, and structured visual compositions.
Column guides divide a layout into vertical columns. They are commonly used in website and dashboard design to create predictable horizontal spacing and alignment.
| Column 1 | Column 2 | Column 3 | Column 4 |Row guides divide a layout horizontally and can help maintain consistent vertical structure.
──────────── Row 1
──────────── Row 2
──────────── Row 3
──────────── Row 4
Many design systems use spacing scales based on multiples of 4 or 8. The purpose is to create predictable and reusable spacing values.
| Scale | Example |
|---|---|
| 4-point | 4, 8, 12, 16, 20, 24, 32 |
| 8-point | 8, 16, 24, 32, 40, 48, 64 |
The exact spacing system should be defined according to the project's design system rather than applied blindly.
A consistent spacing scale prevents random values from appearing throughout a design.
Small gap = 8px
Medium gap = 16px
Large gap = 24px
XL gap = 32px
Section gap = 48px
Spacing communicates relationships. Smaller spacing usually indicates that elements are related, while larger spacing can indicate separation between different sections.
Heading
↓ 8px
Subtitle
↓ 24px
New Section
Proximity is a visual design principle stating that objects placed close together are perceived as related. Proper spacing therefore helps users understand groups of information without requiring additional visual boundaries.
Whitespace is the empty area surrounding and between design elements. It does not mean wasted space. Good whitespace improves readability, focus, hierarchy, and overall visual balance.
Repeated spacing values create visual rhythm. When buttons, cards, headings, and sections follow predictable spacing patterns, users can understand the interface more quickly.
Typography requires careful spacing between headings, paragraphs, labels, and other text elements.
Heading
↓ 8px
Supporting Text
↓ 16px
Body Content
Spacing should complement font size, line height, and content hierarchy.
Line height controls vertical space within a text block, while object gap controls the distance between separate layers.
| Property | Controls |
|---|---|
| Line Height | Space between lines of text |
| Gap | Space between separate objects |
| Padding | Space between container boundary and content |
Paragraphs should have enough separation to distinguish different ideas while remaining visually connected to the same section.
Icons commonly require consistent spacing from labels and neighboring icons.
[Icon] 8px [Label]
[Icon] 8px [Label]
[Icon] 8px [Label]
Buttons usually require internal padding around their text or icon. Consistent padding makes buttons easier to scan and gives them a predictable visual size.
┌────────────────────┐
│ 16px Text 16px │
└────────────────────┘
↑ padding
Buttons placed next to one another should have a consistent gap.
[Cancel] 12px [Save]Button spacing should distinguish primary actions from secondary actions without creating excessive separation.
Cards often contain an image, title, description, metadata, and action. Consistent spacing between these elements improves readability.
┌──────────────────────┐
│ Image │
│ ↓ 16px │
│ Title │
│ ↓ 8px │
│ Description │
│ ↓ 16px │
│ [Button] │
└──────────────────────┘
When several cards appear in a grid, equal horizontal and vertical gaps create a professional product-grid structure.
[Card] 24px [Card] 24px [Card]
↓
24px
↓
[Card] 24px [Card] 24px [Card]
Forms require clear vertical spacing between labels, input fields, validation messages, and action buttons.
Email Label
↓ 8px
Email Input
↓ 16px
Password Label
↓ 8px
Password Input
↓ 24px
[Login]
Navigation items should have enough space to remain readable and clickable while maintaining a clear relationship with the navigation container.
Logo 24px Home 24px Products 24px ContactDashboards contain multiple cards, tables, charts, filters, and navigation elements. Consistent spacing prevents the interface from appearing crowded.
Dashboard
│
├── Header
│
├── KPI Cards
│ ├── Card
│ ├── Card
│ └── Card
│
├── Charts
│
└── Data Table
E-commerce interfaces commonly use equal card spacing. Distribution and Smart Selection can quickly create consistent product grids.
Mobile interfaces require careful spacing because screen width is limited. Consistent margins, card gaps, button padding, and section spacing improve touch usability and readability.
Responsive designs may require spacing values to adapt according to available screen size. A desktop layout may use larger section gaps while a mobile layout may use smaller values.
Desktop:
Content margin = 48px
Tablet:
Content margin = 32px
Mobile:
Content margin = 16px
Auto Layout is one of the most powerful Figma features for managing spacing and responsive relationships. It automatically arranges child objects according to direction, gap, padding, alignment, and resizing rules.
Select a frame or one or more layers and press Shift + A to add Auto Layout.
Select Objects
↓
Shift + A
↓
Auto Layout Frame
↓
Configure Direction + Gap + Padding + Alignment
Horizontal Auto Layout places children along the X-axis. It is useful for navigation bars, button groups, icon rows, tags, and horizontal card layouts.
[Item 1] → [Item 2] → [Item 3] → [Item 4]Vertical Auto Layout places children along the Y-axis. It is useful for forms, lists, article content, menus, and stacked cards.
[Heading]
↓
[Description]
↓
[Input]
↓
[Button]
Grid Auto Layout is useful for layouts containing rows and columns. It provides separate control over row and column gaps.
[A] [B] [C]
↓ ↓ ↓
[D] [E] [F]
↓ ↓ ↓
[G] [H] [I]
Gap determines the distance between child objects in an Auto Layout frame. A numeric value can be used when a specific fixed distance is required.
Gap = 16px
[A] 16px [B] 16px [C]
Padding controls the space between the boundary of an Auto Layout frame and its children.
┌─────────────────────────┐
│ 24px padding │
│ [Content] │
│ │
└─────────────────────────┘
Padding can be uniform or independently controlled for different sides.
Auto spacing can distribute available space between objects while keeping the outer edges free of additional distribution space. This behaves conceptually like CSS space-between.
┌────────────────────────────┐
│[A] [B] [C] │
└────────────────────────────┘
Evenly distributes available space across gaps and edges using equal spacing relationships. This corresponds conceptually to CSS space-evenly.
┌────────────────────────────┐
│ [A] [B] [C] │
└────────────────────────────┘
Around distributes space so that the edge spaces are half the size of the spaces between objects. This corresponds conceptually to CSS space-around.
Edge Gap/2 [A] Gap [B] Gap [C] Gap/2 EdgeWhen Wrap is enabled in a horizontal or vertical Auto Layout flow, overflowing objects can move to another row or column. This makes it useful for tags, chips, product cards, and responsive lists.
[Tag] [Tag] [Tag] [Tag]
[Tag] [Tag] [Tag]
| Mode | Meaning |
|---|---|
| Hug Contents | Container adjusts around its content while respecting spacing |
| Fill Container | Object uses available space within its parent |
| Fixed | Object maintains a defined dimension |
Combining these resizing modes with gap and padding creates flexible responsive components.
Complex interfaces can contain Auto Layout inside Auto Layout.
Page Frame
│
└── Card Auto Layout
│
├── Image
├── Content Auto Layout
│ ├── Title
│ ├── Description
│ └── Button
└── Footer Auto Layout
Nested Auto Layout helps maintain spacing automatically when content changes.
Spacing should be defined consistently inside reusable components. For example, every button component can use the same horizontal padding and vertical padding.
This prevents designers from manually fixing the spacing every time the component is reused.
Variants can represent different component states such as default, hover, active, disabled, or loading. Spacing should remain consistent unless a variant intentionally changes its structure.
Design systems can use variables or spacing tokens to standardize values.
spacing-xs = 4px
spacing-sm = 8px
spacing-md = 16px
spacing-lg = 24px
spacing-xl = 32px
spacing-2xl = 48px
Using reusable spacing values makes large design systems easier to maintain.
Constraints determine how layers respond when their parent frame changes size. Correct constraints help preserve meaningful margins and spacing in responsive layouts.
One of the most common mistakes is using different gaps for visually similar components.
Wrong:
Card gap = 18px
Card gap = 23px
Card gap = 21px
Better:
Card gap = 24px
Card gap = 24px
Card gap = 24px
Manual positioning may work for simple visual exploration, but it becomes difficult to maintain when content changes. Auto Layout, Smart Selection, and distribution tools should be preferred for repeated structures.
Whitespace is useful, but excessive whitespace can disconnect related content. Use spacing to communicate hierarchy rather than simply making every section larger.
When elements are too close together, users may struggle to identify which content belongs together. Give important groups enough breathing room.
Spacing should be tested using realistic text, images, and content lengths. A layout that looks perfect with placeholder text may break when actual content is inserted.
Create a product grid containing six cards.
┌────────┐ 24px ┌────────┐ 24px ┌────────┐
│ Card 1 │ │ Card 2 │ │ Card 3 │
└────────┘ └────────┘ └────────┘
24px
┌────────┐ 24px ┌────────┐ 24px ┌────────┐
│ Card 4 │ │ Card 5 │ │ Card 6 │
└────────┘ └────────┘ └────────┘
Create a navigation bar containing a logo, navigation links, search icon, notification icon, and profile button.
Logo → Navigation Links → Search → Notification → ProfileUse horizontal Auto Layout, a consistent gap, padding, alignment, and responsive resizing.
Create a login form using consistent vertical spacing.
Login
↓ 24px
Email Label
↓ 8px
Email Input
↓ 16px
Password Label
↓ 8px
Password Input
↓ 24px
Forgot Password
↓ 24px
Login Button
Use vertical Auto Layout so that spacing remains consistent when the content changes.
Create a dashboard containing a header, four KPI cards, two charts, and a data table.
Dashboard
│
├── Header
│
├── KPI Row
│ ├── KPI 1
│ ├── KPI 2
│ ├── KPI 3
│ └── KPI 4
│
├── Chart Row
│ ├── Chart 1
│ └── Chart 2
│
└── Table
Use distribution for repeated KPI cards and Auto Layout for dynamic sections.
Spacing is the amount of empty space between objects or between a container and its content.
Distribution creates equal space between selected objects along a horizontal or vertical axis.
Alignment positions objects relative to a common edge or center, while distribution controls the space between objects.
Tidy Up organizes selected layers into cleaner rows, columns, or grids and can prepare them for Smart Selection.
Smart Selection provides interactive controls for adjusting spacing, arranging, resizing, duplicating, and deleting selected layers while maintaining a structured layout.
Padding is space between a container boundary and its children, while gap is space between child objects.
Auto Layout automatically maintains relationships between elements when content is added, removed, resized, or changed.
It creates equal horizontal spacing between selected objects while preserving the outermost objects' positions.
It creates equal vertical spacing between selected objects while preserving the topmost and bottommost objects.
Consistent spacing improves hierarchy, readability, rhythm, usability, and overall visual quality.
| Concept | Quick Meaning |
|---|---|
| Spacing | Distance between or around elements |
| Distribution | Creates equal space between selected layers |
| Alignment | Lines objects up using edges or centers |
| Tidy Up | Organizes messy selections into structured layouts |
| Smart Selection | Interactive spacing and arrangement controls |
| Gap | Space between child objects |
| Padding | Space between parent boundary and children |
| Auto Layout | Dynamic layout system for responsive spacing and positioning |
| Layout Guides | Visual guides for structured layouts |
| Spacing Tokens | Reusable spacing values in a design system |
Spacing and Distribution are essential Figma skills for creating professional and consistent interfaces. Designers use spacing to establish hierarchy, proximity, readability, and visual rhythm, while distribution helps create equal distances between repeated objects.
For simple layouts, alignment and distribution tools can quickly correct spacing problems. For more complex and responsive layouts, Tidy Up, Smart Selection, Auto Layout, padding, gap, resizing rules, components, and spacing variables provide a scalable workflow.
By combining these features, designers can create clean cards, forms, dashboards, navigation systems, product grids, mobile interfaces, and responsive websites without relying on repetitive manual positioning.
For structured learning and practical Figma training, visit JustAcademy Figma Training or Register for Figma Course Demo.
